<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-11 11:21:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-11 11:26:37
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>x轴坐标:<span id="x">0</span></h1>
    <h1>y轴坐标:<span id="y">0</span></h1>
    <script>
        // 什麽時候會發生結果 
        // 鼠标移动 mousemove 

        //鼠标在哪个范围内活动
        // 整个浏览器的可视窗口范围内  

        // 获取clientX clientX
        // 把结果分别放到span标签中 

        var xEle = document.getElementById('x');
        var yEle = document.getElementById('y');

        document.onmousemove = function(e){
            var x = e.clientX;
            var y = e.clientY;

            xEle.innerText = x;
            yEle.innerText = y;
        }   
    </script>
</body>
</html>